<template>
	<div class="card mb-3" style="line-height: 1.2;">
		<div class="card-header d-flex align-items-center">
			规格项：
			<el-input :value="item.name" @input="vModel('name',index,$event)" size="mini" style="width: 200px;">
				<el-button slot="append" icon="el-icon-more"></el-button>
			</el-input>
			<el-radio-group :value="item.type" @input="vModel('type',index,$event)" class="ml-2" style="margin-bottom: -10px;" 
			 size="mini">
				<el-radio :label="0">无</el-radio>
				<el-radio :label="1">颜色</el-radio>
				<el-radio :label="2">图片</el-radio>
			</el-radio-group>
			<!-- 上移 -->
			<el-button :disabled="index === 0" @click="sortCard('moveUp', index)" class="ml-auto" size="mini" icon="el-icon-top"></el-button>
			<!-- 下移 -->
			<el-button :disabled="total === (index + 1)" @click="sortCard('moveDown', index)" size="mini" icon="el-icon-bottom"></el-button>
			<!-- 删除 -->
			<el-button @click="delSkuCard(index)" size="mini" type="text">删除</el-button>
		</div>
		<div class="card-body">
			<!-- 规格属性列表 -->
			<div class="d-flex align-items-center flex-wrap">
				<skuCardChildren v-for="(item2,index2) in item.list" :key="index2" 
				:index="index2" :item="item2" :type="item.type" :cardIndex="index"
				></skuCardChildren>
			</div>
			<!-- 增加规格属性 -->
			<div>
				<el-button @click="addSkuValue(index)" icon="el-icon-plus" type="text" size="mini">
					增加规格值
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import skuCardChildren from './sku-card-children.vue'
	import { mapMutations } from 'vuex'
	export default {
		props: {
			item: Object,
			index: Number,
			total: Number
		},
		data(){
			return {
				// list: this.item.list
			}
		},
		components: {
			skuCardChildren
		},
		mounted() {
			// 监听拖拽过程
			// this.$dragging.$on('dragged', ({value})=>{
			// 	console.log(value.item)
			// 	console.log(value.list)
			// 	console.log(value.otherData)
			// }),
			// 监听拖拽结束
			// this.$dragging.$on('dragend', (e)=>{
			// 	if(e.group === 'skuItem'+this.index){
			// 		this.sortSkuValue({
			// 			index:this.index,
			// 			value:this.list
			// 		})
			// 	}
				
				//v-dragging="{ item: item2, list: list, group: `skuItem${index}` }"
				
			// 	// console.log(e)
			// 	// console.log('拖拽结束')
			// })
		},
		methods: {
			...mapMutations(['delSkuCard', 'vModelSkuCard', 'sortSkuCard', 'addSkuValue', 'sortSkuValue']),
			// 修改表单的值
			vModel(key, index, value) {
				this.vModelSkuCard({key, index, value})
			},
			// 排序
			sortCard(action, index) {
				this.sortSkuCard({action, index})
			}
		}
	}
</script>

<style>
</style>
